<template>
    <div class="relative w-[170px] " @mouseenter="mouseenter" @mouseleave="mouseleave">
        <div class="group header-box relative">
            <img class="" src="@/assets/images/header_user.png" alt="" srcset="" />
            <span class="mx-[10px] inline-block one-ellipsis text-white">{{ user.user?.nickname || '操作者' }} </span>
            <img class="" src="@/assets/images/header_arrow_bottom.png" alt="" srcset="" />
        </div>
        <div class="bg-white w-[140px] z-10 absolute rounded-[6px] left-0 top-[50px] text-[#586799] text-[14px] shadow"
            :style="{ display: move ? 'block' : 'none' }">
            <div class="h-[42px] flex items-center group cursor-pointer hover:bg-[#e3f0ff]" @click="logOut">
                <div class="w-[48px] flex justify-center items-center">
                    <img src="@/assets/images/top_logout.png" class="inline-block group-hover:hidden" alt="" srcset="" />
                    <img src="@/assets/images/top_logout_hover.png" class="hidden group-hover:block" alt="" srcset="" />
                </div>
                <span class="group-hover:text-[#0079ff]">退出登录</span>
            </div>
        </div>
    </div>
    <a-modal :open="visible" width="300px" :centered="true" title="退出提醒" @ok="handleOk"
        @cancel="() => (visible = false)">
        <p class="text-[18px] text-center my-[10px]">是否退出登录状态</p>
    </a-modal>
</template>
<script lang="ts" setup>
import { useUserInfo } from '@/store/user';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const move = ref(false);
const user = useUserInfo();
const router = useRouter();
const visible = ref<boolean>(false);

const mouseenter = () => {
    move.value = true;
};

const mouseleave = () => {
    move.value = false;
};



const logOut = () => {
    visible.value = true;
};

const handleOk = async () => {
    move.value = false;
    await user.logOut();
    setTimeout(() => {
        router.push({ name: "login" });
    }, 100);
    visible.value = false;
};
</script>
<style lang="scss" scoped></style>
  